<!--
 * @Description:
 * @Date: 2023-12-20 14:19:12
 * @LastEditTime: 2025-08-08 15:24:12
-->
<template>
  <div :class="className" id="map" :style="{ height: height, width: width }" />
</template>

<script>
import * as echarts from "echarts";
import router from "../../../router/index";
import DigitizationApi from "../api/digitization"
require("echarts/theme/macarons"); // echarts theme
// import { contactStationList } from "@/api/digitization/home/index";
import resize from "../components/mixins/resize";
import img2 from "../../../assets/images/digitzation/kaung.png";
import icon1 from "../../../assets/images/digitzation/icon1.png";
import icon2 from "../../../assets/images/digitzation/icon2.png";
import icon3 from "../../../assets/images/digitzation/icon3.png";
import axios from "axios";
export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "100%",
    },
    chartData: {
      type: Array,
      required: false,
      default: []
    },
  },
  watch: {
    chartData: {
      deep: true,
      immediate: true,
      handler: function (val) {
        if (val && val.length>0) {
          this.initMap(val)
        }
      },
    },
  },
  data() {
    return {
      chart: null,
      mapDate: [],
      num: 0,
    };
  },

  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.$messageBox.hide()
    this.chart = null;
  },
  methods: {
    initMap(paramsData) {
      axios({
        //url: "/map/610625.json",
         url: "/snsst/chudayi/ya/equipment/map/610625.json",
        method: "get",
      }).then((map) => {
        DigitizationApi.queryByCond().then(res => {
          if (res.data.code == 200) {
            this.mapDate = res.data.data.list.map((item) => {

              let targetData = paramsData.filter(target => target.name == item.name)
              let obj = {}
              if (targetData && targetData.length > 0) {

                obj.num = targetData[0].num
                obj.target = targetData[0].target
              }
              obj = Object.assign(obj, item)
              return {
                id: obj.id,
                img: icon1,
                value: [obj.departmentName.split(",")[0], obj.departmentName.split(",")[1]],
                datas: obj,
              };
            });
            this.initChart(map.data);
          }
        })
      });

    },
    initChart(data) {
      if (!this.chart) {
        this.chart = echarts.init(this.$el, "macarons");
      }
      // this.chart.showLoading({
      //   textColor: "#fff",
      //   text: "正在加载中",
      //   fontSize: 18,
      //   maskColor: "rgba(255, 255, 255, 0)",
      // });
      echarts.registerMap("志丹县", { geoJSON: data });
      this.chart &&
        this.chart.setOption({
          series: [
            {
              name: "地图",
              type: "map",
              map: "志丹县",
              selectedMode: false,
              label: {
                normal: {
                  show: true,
                  textStyle: {
                    color: "#fff",
                    fontSize: "16px"
                  },
                },
                emphasis: {
                  textStyle: {
                    color: "#fff",

                  },
                },
              },

              itemStyle: {
                normal: {
                  borderColor: "#2ab8ff",
                  borderWidth: 1.5,
                  areaColor: "#12235c",
                },
                emphasis: {
                  areaColor: "#2AB8FF",
                  borderWidth: 0,
                  color: "green",
                },
              },
              zoom: 1.1,
              roam: false,
            },
            {
              tooltip: {
                show: false,
              },
              type: "effectScatter",
              coordinateSystem: "geo",
              rippleEffect: {
                scale: 10,
                brushType: "stroke",
              },
              showEffectOn: "render",
              itemStyle: {
                normal: {
                  shadowColor: "#0ff",
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowOffsetY: 0,
                  color: function (params) {
                    var colorList = [
                      new echarts.graphic.LinearGradient(1, 1, 0, 0, [
                        {
                          offset: 0,
                          color: "#64fbc5",
                        },
                        {
                          offset: 1,
                          color: "#018ace",
                        },
                      ]),
                      new echarts.graphic.LinearGradient(1, 1, 0, 0, [
                        {
                          offset: 0,
                          color: "#64fbc5",
                        },
                        {
                          offset: 1,
                          color: "#018ace",
                        },
                      ]),
                      new echarts.graphic.LinearGradient(1, 1, 0, 0, [
                        {
                          offset: 0,
                          color: "#168e6d",
                        },
                        {
                          offset: 1,
                          color: "#c78d7b",
                        },
                      ]),
                      new echarts.graphic.LinearGradient(1, 1, 0, 0, [
                        {
                          offset: 0,
                          color: "#149be1",
                        },
                        {
                          offset: 1,
                          color: "#6f2eb6",
                        },
                      ]),
                      new echarts.graphic.LinearGradient(1, 1, 0, 0, [
                        {
                          offset: 0,
                          color: "#168e6d",
                        },
                        {
                          offset: 1,
                          color: "#c78d7b",
                        },
                      ]),
                      new echarts.graphic.LinearGradient(1, 1, 0, 0, [
                        {
                          offset: 0,
                          color: "#149be1",
                        },
                        {
                          offset: 1,
                          color: "#6f2eb6",
                        },
                      ]),
                    ];
                    return colorList[params.dataIndex];
                  },
                },
              },
              label: {
                normal: {
                  color: "#fff",
                },
              },
              symbol: "circle",
              symbolSize: [10, 5],
              data: this.mapDate,
              zlevel: 1,
            },
            {
              type: "scatter",
              coordinateSystem: "geo",
              itemStyle: {
                color: "#f00",
              },
              symbol: function (value, params) {
                return "image://" + params.data.img;
              },
              symbolSize: [32, 41],
              symbolOffset: [0, -20],
              z: 9999,
              data: this.mapDate,
            },
            // {
            //   type: "scatter",
            //   coordinateSystem: "geo",
            //   label: {
            //     normal: {
            //       show: true,
            //       formatter: function (params) {
            //         var name = params.name;
            //         var value = params.data.datas;
            //         // var text = `{fline|${value}}\n{tline|${name}}`;
            //         var text = `{fline|${name}}`;
            //         return text;
            //       },
            //       color: "#fff",
            //       rich: {
            //         fline: {
            //           padding: [0, 25],
            //           color: "#FFB980",
            //           textShadowColor: "#030615",
            //           textShadowBlur: "0",
            //           textShadowOffsetX: 1,
            //           textShadowOffsetY: 1,
            //           fontSize: 16,
            //           fontWeight: 600,
            //         },
            //         tline: {
            //           padding: [0, 27],
            //           color: "#ABF8FF",
            //           fontSize: 12,
            //         },
            //       },
            //     },
            //     emphasis: {
            //       show: true,
            //     },
            //   },
            //   itemStyle: {
            //     color: "#00FFF6",
            //   },
            //   symbol: "image://" + img2,
            //   symbolSize: [100, 50],
            //   symbolOffset: [0, -60],
            //   z: 999,
            //   data: this.mapDate,
            // },
          ],
          geo: {
            map: "志丹县",
            type: "map",
            aspectScale: 0.75, //长宽比
            zoom: 1.1,
            roam: false,
            itemStyle: {
              normal: {
                areaColor: "#202862",
                shadowColor: "#182f68",
                shadowOffsetX: 0,
                shadowOffsetY: 25,
              },
              emphasis: {
                areaColor: "#2AB8FF",
                borderWidth: 0,
                color: "green",
                label: {
                  show: false,
                },
              },
            },
          },
        });
      this.chart.hideLoading();
      this.chart.off("click");
      this.chart.on("click", (params) => {

        if (params.seriesType == "scatter") {
          let dom = document.getElementsByClassName("message-box")[0];

          if (dom?.id && dom?.id.split("-")[1] == params.data.id) {
            this.$messageBox.hide();
          } else {
            this.$messageBox.hide();

            this.$messageBox.show(
              {
                msg: {
                  info: params.data.datas,
                  aaa: this.convertMain(params.value[0], params.value[1]),

                },
              },
              () => {
                console.log("open callback");
              }
            );
          }
        } else {
          this.$messageBox.hide();
        }
      });

    },

    convertMain(Lng, lat) {
      return this.chart.convertToPixel("geo", [Lng, lat]);
    },

  },

};
</script>
<style lang="scss" scoped>
#map {
  width: 100%;
  height: 100%;
  position: relative;
}
</style>
